<template>
  <div class="mod-demo-echarts">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">

      <el-form-item label="监测点" v-if="switchNums >= 1">
        <el-select v-model="disQuery.station" clearable placeholder="选择监测点">
          <el-option
            v-for="(jiance, index) in jianceNumLength"
            :key="index"
            :value="jiance.value"
            :label="jiance.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="深度区间1" v-if="switchNums >= 1">
        <el-select v-model="disQuery.query1" clearable placeholder="选择深度">
          <el-option
            v-for="(val, index) in datalength"
            :key="index"
            :value="val - 1"
            :label="'-'+val+'m'"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="深度区间2" v-if="switchNums >= 2">
        <el-select v-model="disQuery.query2" clearable placeholder="选择深度">
          <el-option
            v-for="(val, index) in datalength"
            :key="index"
            :value="val + 9"
            :label="'-'+(val+10)+'m'"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="深度区间3" v-if="switchNums >= 3">
        <el-select v-model="disQuery.query3" clearable placeholder="选择深度">
          <el-option
            v-for="(val, index) in datalength"
            :key="index"
            :value="val + 19"
            :label="'-'+(val+20)+'m'"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="深度区间4" v-if="switchNums >= 4">
        <el-select v-model="disQuery.query4" clearable placeholder="选择深度">
          <el-option
            v-for="(val, index) in datalength"
            :key="index"
            :value="val + 29"
            :label="'-'+(val+30)+'m'"
          />
        </el-select>
      </el-form-item>
      </br>
      <el-form-item label="查询范围">
        <el-date-picker
          v-model="disQuery.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="disQuery.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getList()"
        >查询</el-button
      >
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div id="J_chartfordischange" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="J_chartfordisconversion" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      datalength: [],
      switchNums: 0,
      disQuery: {},
      chartLine: null,
      chartLineForDisChange: null,
      xDataForDischanged: [],
      yData1ForDischanged: [],
      yData2ForDischanged: [],
      yData3ForDischanged: [],
      yData4ForDischanged: [],
      xData: [],
      yData1: [],
      yData2: [],
      yData3: [],
      yData4: [],
      jianceNumLength:[],
      disChangeMin: -100,
	    disChangeMax: 100,
      disChangeRateMin: -100,
	    disChangeRateMax: 100
    };
  },
  created() {
    this.initFbgNum();
    this.initJianceNumLength();
  },
  mounted() {
    //this.initChartLine();
  },
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartLine) {
      this.chartLine.resize();
      this.chartLineForDisChange.resize();
    }
  },
  methods: {
    // 初始化监测长度
    initJianceNumLength(){
      this.$http({
      url: this.$http.adornUrl('/generator/amplitude/getMeasurePoint'),
      method: 'get'
      }).then(({ data }) => {
        this.jianceNumLength = data.data;
      })
    },
    // 初始化FBG的数量和光开关的数量除以2
    initFbgNum() {
      this.$http({
        url: this.$http.adornUrl("/generator/config/get/fbg/num"),
        method: "get"
      }).then(({ data }) => {
        this.datalength = data.datalength;
        this.switchNums = data.switchNum/2;
      });
    },
    // 初始化横纵坐标
    getList() {
      this.updateTodayConversion();
      this.initForDisConversion();
      this.initForDisChange();
    },
    updateTodayConversion(){
      this.$http({
      url: this.$http.adornUrl('/generator/conrate/update/today/conrate'),
      method: 'get'
      }).then(({ data }) => {
      })
    },
    initForDisChange() {
      this.$http({
        url: this.$http.adornUrl(
          "/generator/displacement/get/displacement/change/by/query"
        ),
        method: "post",
        data: this.$http.adornData(this.disQuery, false)
      }).then(({ data }) => {
        this.xDataForDischanged = data.xData;
        this.yData1ForDischanged = data.yData1;
        this.yData2ForDischanged = data.yData2;
        this.yData3ForDischanged = data.yData3;
        this.yData4ForDischanged = data.yData4;
        this.disChangeMin = -100;
        this.disChangeMax = 100;
        let maxYLable1 = 0;
        let minYlable1 = 0;
        let maxYLable2 = 0;
        let minYlable2 = 0;
        let maxYLable3 = 0;
        let minYlable3 = 0;
        let maxYLable4 = 0;
        let minYlable4 = 0;
        let len1 = this.yData1ForDischanged.length;
        let len2 = this.yData2ForDischanged.length;
        let len3 = this.yData3ForDischanged.length;
        let len4 = this.yData4ForDischanged.length;
        for(let i = 0;i<len1;i++){
          if(this.yData1ForDischanged[i]>maxYLable1){
            maxYLable1 = this.yData1ForDischanged[i];
          }
          if(this.yData1ForDischanged[i]<minYlable1){
            minYlable1 = this.yData1ForDischanged[i];
          }
        }
        for(let i = 0;i<len2;i++){
          if(this.yData2ForDischanged[i]>maxYLable2){
            maxYLable2 = this.yData2ForDischanged[i];
          }
          if(this.yData2ForDischanged[i]<minYlable2){
            minYlable2 = this.yData2ForDischanged[i];
          }
        }
        for(let i = 0;i<len3;i++){
          if(this.yData3ForDischanged[i]>maxYLable3){
            maxYLable3 = this.yData3ForDischanged[i];
          }
          if(this.yData3ForDischanged[i]<minYlable3){
            minYlable3 = this.yData3ForDischanged[i];
          }
        }
        for(let i = 0;i<len4;i++){
          if(this.yData4ForDischanged[i]>maxYLable4){
            maxYLable4 = this.yData4ForDischanged[i];
          }
          if(this.yData4ForDischanged[i]<minYlable4){
            minYlable4 = this.yData4ForDischanged[i];
          }
        }
        let minYlable = minYlable1+minYlable2+minYlable3+minYlable4;
        let maxYLable = maxYLable1+maxYLable2+maxYLable3+maxYLable4;
        let index1 = 3;
        let index2 = 3;
        while(minYlable<this.disChangeMin && index1>0){
          this.disChangeMin*=5;
          index1--;
        }
        while(maxYLable>this.disChangeMax && index2>0){
          this.disChangeMax*=5;
          index2--;
        }
        this.initChartLineForDisChange();
      });
    },
    initForDisConversion() {
      this.$http({
        url: this.$http.adornUrl(
          "/generator/conrate/get/displacement/by/query"
        ),
        method: "post",
        data: this.$http.adornData(this.disQuery, false)
      }).then(({ data }) => {
        this.xData = data.xData;
        this.yData1 = data.yData1;
        this.yData2 = data.yData2;
        this.yData3 = data.yData3;
        this.yData4 = data.yData4;
        this.disChangeRateMin = -100;
        this.disChangeRateMax = 100;
        let maxYLable1 = 0;
        let minYlable1 = 0;
        let maxYLable2 = 0;
        let minYlable2 = 0;
        let maxYLable3 = 0;
        let minYlable3 = 0;
        let maxYLable4 = 0;
        let minYlable4 = 0;
        //debugger;
        let len1 = this.yData1.length;
        let len2 = this.yData2.length;
        let len3 = this.yData3.length;
        let len4 = this.yData4.length;
        for(let i = 0;i<len1;i++){
          if(this.yData1[i]>maxYLable1){
            maxYLable1 = this.yData1[i];
          }
          if(this.yData1[i]<minYlable1){
            minYlable1 = this.yData1[i];
          }
        }
        for(let i = 0;i<len2;i++){
          if(this.yData2[i]>maxYLable2){
            maxYLable2 = this.yData2[i];
          }
          if(this.yData2[i]<minYlable2){
            minYlable2 = this.yData2[i];
          }
        }
        for(let i = 0;i<len3;i++){
          if(this.yData3[i]>maxYLable3){
            maxYLable3 = this.yData3[i];
          }
          if(this.yData3[i]<minYlable3){
            minYlable3 = this.yData3[i];
          }
        }
        for(let i = 0;i<len4;i++){
          if(this.yData4[i]>maxYLable4){
            maxYLable4 = this.yData4[i];
          }
          if(this.yData4[i]<minYlable4){
            minYlable4 = this.yData4[i];
          }
        }
        let minYlable = minYlable1+minYlable2+minYlable3+minYlable4;
        let maxYLable = maxYLable1+maxYLable2+maxYLable3+maxYLable4;
        let index1 = 3;
        let index2 = 3;
        while(minYlable<this.disChangeRateMin && index1>0){
          this.disChangeRateMin*=5;
          index1--;
        }
        while(maxYLable>this.disChangeRateMax && index2>0){
          this.disChangeRateMax*=5;
          index2--;
        }
        this.initChartLine();
      });
    },
    resetData() {
      this.xData = [];
      this.xDataForDischanged = [];
      this.yData1 = [];
      this.yData1ForDischanged = [];
      this.yData2 = [];
      this.yData2ForDischanged = [];
      this.yData3 = [];
      this.yData3ForDischanged = [];
      this.yData4 = [];
      this.yData4ForDischanged = [];
      this.chartLineForDisChange = null;
      this.chartLine = null;
      this.disQuery = {};
    },
    initChartLineForDisChange() {
      var option = {
        title: {
          text: "位移量(mm)"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: []
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              //yAxisIndex: "none"
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [
          {
            type: 'inside',
            xAxisIndex: [0],
          },
          {
            type: 'inside',
            yAxisIndex: [0],
          }
        ],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.xDataForDischanged
        },
        yAxis: {
          type: "value",
          min: this.disChangeMin,
	        max: this.disChangeMax
        },
        series: [
          {
            name: "传感段1",
            type: "line",
            stack: "总量",
            data: this.yData1ForDischanged
          },
          {
            name: "传感段2",
            type: "line",
            stack: "总量",
            data: this.yData2ForDischanged
          },
          {
            name: "传感段3",
            type: "line",
            stack: "总量",
            data: this.yData3ForDischanged
          },
          {
            name: "传感段4",
            type: "line",
            stack: "总量",
            data: this.yData4ForDischanged
          }
        ]
      };
      // 初始化legend
      if(this.yData1ForDischanged.length!=0){
        option.legend.data.push("传感段1")
      }
      if(this.yData2ForDischanged.length!=0){
        option.legend.data.push("传感段2")
      }
      if(this.yData3ForDischanged.length!=0){
        option.legend.data.push("传感段3")
      }
      if(this.yData4ForDischanged.length!=0){
        option.legend.data.push("传感段4")
      }
      this.chartLine = echarts.init(
        document.getElementById("J_chartfordischange")
      );
      this.chartLine.setOption(option);
      window.addEventListener("resize", () => {
        this.chartLine.resize();
      });
    },
    // 折线图
    initChartLine() {
      var option = {
        title: {
          text: "位移变化率(mm/天)"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: []
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              //yAxisIndex: "none"
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [
          {
            type: 'inside',
            xAxisIndex: [0],
          },
          {
            type: 'inside',
            yAxisIndex: [0],
          }
        ],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.xData
        },
        yAxis: {
          type: "value",
          min:this.disChangeRateMin,
          max:this.disChangeRateMax
        },
        series: [
          {
            name: "传感段1",
            type: "line",
            stack: "总量",
            data: this.yData1
          },
          {
            name: "传感段2",
            type: "line",
            stack: "总量",
            data: this.yData2
          },
          {
            name: "传感段3",
            type: "line",
            stack: "总量",
            data: this.yData3
          },
          {
            name: "传感段4",
            type: "line",
            stack: "总量",
            data: this.yData4
          }
        ]
      };
      // 初始化legend
      if(this.yData1.length!=0){
        option.legend.data.push("传感段1")
      }
      if(this.yData2.length!=0){
        option.legend.data.push("传感段2")
      }
      if(this.yData3.length!=0){
        option.legend.data.push("传感段3")
      }
      if(this.yData4.length!=0){
        option.legend.data.push("传感段4")
      }
      this.chartLine = echarts.init(
        document.getElementById("J_chartfordisconversion")
      );
      this.chartLine.setOption(option);
      window.addEventListener("resize", () => {
        this.chartLine.resize();
      });
    }
  }
};
</script>

<style lang="scss">
.mod-demo-echarts {
  > .el-alert {
    margin-bottom: 10px;
  }
  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;
    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .chart-box {
    min-height: 400px;
  }
}
</style>
